<template>
	<view class="toast_mode">
		<view class="alert_content_createGoods">
			<view class="del" @click="cancel">
				<image src="../../../static/delete.png" mode="aspectFill"></image>
			</view>
			<view class="alert_top_title">
				添加商品
			</view>
			<view class="alert_center">
				<view class="alert_center_shopname">
					<text class="alert_center_shopname_title">商品名称</text>
					<input type="text" class="alert_center_shopname_input" v-model="goodsName" placeholder="请输入商品名称">
				</view>
				<view class="alert_center_shopname" style="margin-top: 24rpx;">
					<text class="alert_center_shopname_title">商品价格</text>
					<input type="digit" class="alert_center_shopname_input" v-model="goodsPrice" placeholder="请输入商品价格">
				</view>
				<view class="alert_center_shopname" style="margin-top: 24rpx;">
					<text class="alert_center_shopname_title">关键字</text>
					<input type="text" class="alert_center_shopname_input" v-model="searchContent" placeholder="请输入搜索商品关键字">
				</view>
				<view class="alert_center_category">
					<view class="alert_center_category_title">是否展示</view>
					<radio-group @change="setStatus" class="status_set">
						<label class="radio_label" v-for="item in radioGroup" :key="index">
							<radio :value="item.status" :checked="item.status==isShow" /><text>{{item.name}}</text>
						</label>
					</radio-group>
				</view>
				<!-- <view class="alert_center_category">
					<view class="alert_center_category_title">商品分类</view>
					<view class="alert_center_category_category_content">
						<text class="alert_center_category_category_name">食品</text>
						<text class="alert_center_category_category_name">食品</text>
						<text class="alert_center_category_category_name">食品</text>
						<text class="alert_center_category_category_name">食品</text>
					</view>
				</view> -->
				<view class="alert_center_img">
					<text class="alert_center_img_title">商品图片</text>
					<view class="alert_center_img_upload" @click="uploadGoodsImg">
						<image :src="fileNameSrc" mode="aspectFill"></image>
						<text v-if="fileNameSrc == ''" class="alert_center_img_upload_title">添加照片</text>
					</view>
				</view>
				<view class="alert_center_img">
					<textarea v-model="goodsDescribe"  placeholder="请输入商品描述" class="textarea_describe" />
				</view>
			</view>
			<view class="alert_btn" @click="submit">确定</view>
		</view>
		<view class="progress" v-show="showProgress">
			<view class="progress_text">上传中</view>
			<progress style="width: 600rpx;padding: 13rpx 0 0 25rpx;" :percent="progress" active stroke-width="3" />
		</view>
	</view>
</template>

<script>
	import base from '../../../api/base'
	export default {
		props:{
			goodsInfo:{
				type:Object,
				default:function(){
					return {}
				}
			}
		},
		data() {
			return {
				goodsName:'',
				goodsPrice:'',
				selCategory:-1,
				radioGroup:[
					{status:0,name:'默认展示'},
					{status:1,name:'搜索时可见'},
				],
				isShow:0,
				showProgress:false,
				progress:0,//上传进度
				fileName:'',
				fileNameSrc:'../../../static/photo.png',//展示的图片
				searchContent:'',
				goodsDescribe:'',
				goods_id:0 //非0则为编辑商品
			}
		},
		mounted(){
			console.log(this.goodsInfo)
			if(JSON.stringify(this.goodsInfo) !='{}'){
				this.goodsName = this.goodsInfo.goodsName
				this.goodsPrice = this.goodsInfo.price
				this.isShow = this.goodsInfo.isShow
				this.searchContent = this.goodsInfo.searchContent
				this.goods_id 	=	this.goodsInfo.id
				this.fileNameSrc = this.goodsInfo.goodsPic
				this.goodsDescribe = this.goodsInfo.goodsDescribe
			}
		},
		methods: {
			cancel(){
				this.$emit('cancelAddGoods')
			},
			submit(){
				if(this.goodsName == ''){
					this.$commonJs.showToast.showNoneToast('请输入商品名称')
					return false
				}else if(this.goodsPrice == ''){
					this.$commonJs.showToast.showNoneToast('请输入商品价格')
					return false
				}else if(this.fileNameSrc == ''){
					this.$commonJs.showToast.showNoneToast('请上传商品图片')
					return false
				}else if(this.searchContent == ''){
					this.$commonJs.showToast.showNoneToast('请输入商品关键字')
					return false
				}
				this.$emit('submitAddGoods',{goodsId:this.goods_id,goodsName:this.goodsName,goodsPrice:this.goodsPrice,goodsSrc:this.fileName,goodsShowSrc:this.fileNameSrc,goods_status:this.isShow,searchContent:this.searchContent,goodsDescribe:this.goodsDescribe})
			},
			setStatus(e){
				console.log(e)
				let that = this
				for (let i = 0; i < that.radioGroup.length; i++) {
					if (that.radioGroup[i].status === Number(e.target.value)) {
						that.isShow = Number(e.target.value);
						break;
					}
				}
			},
			uploadGoodsImg(){
				let that = this
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
				        const uploadTask = uni.uploadFile({
				            url: base.upload_goods_add_url, //仅为示例，非真实的接口地址
				            filePath: tempFilePaths[0],
							header:{
								'Authorization':uni.getStorageSync('adminToken')
							},
				            name: 'file',
				            success: (uploadFileRes) => {
								that.showProgress = false
								that.progress = 0
								let data = JSON.parse(uploadFileRes.data)
								if(data.code == 200){
									this.$commonJs.showToast.showNoneToast(data.msg)
									that.fileName = data.fileName
									that.fileNameSrc = base.common_url + data.fileName
								}else{
									this.$commonJs.showToast.showNoneToast(data.msg)
								}
				            },
							fail:(err)=>{
								this.$commonJs.showToast.showNoneToast(err)
								console.log(err)
							}
				        });
				
				        uploadTask.onProgressUpdate((res) => {
				            that.showProgress = true
							that.progress = res.progress
				        });
				    }
				});
			}
		}
	}
</script>

<style>
	.progress{
		position: fixed;
		top: 50%;
		width: 680rpx;
		z-index: 99999999;
		width: 680rpx;
		background-color: #4D84FE;
		height: 50px;
		margin-left: 35rpx;
		border-radius: 12px;
	}
	.progress .progress_text{
		color: #ffffff;
		padding: 3px;
		text-align: center;
	}
	.status_set{
		display: block;
		float: left;
		margin-top: 20rpx;
	}
	.radio_label{
		margin-left: 20rpx;
	}
	.toast_mode{
		background-color: rgba(0,0,0,0.6);
		position: fixed;
		width: 750rpx;
		height: 100vh;
		left: 0;
		top: 0;
		z-index: 999999;
	}
	.alert_content_createGoods{
		width: 600rpx;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		z-index: 1000000;
		position: absolute;
		top: 202rpx;
		left: 76rpx;
		/* bottom: 100rpx; */
	}
	.textarea_describe{
		width: 510rpx;
		height: 155rpx;
		/* border: 1px solid #ccc; */
		background-color: #F0F0F0;
		border-radius: 15rpx;
		padding: 0rpx 14rpx;
		color: #999999;
		font-size: 28rpx;
	}
	.del{
		width: 600rpx;
		float: right;
	}
	.del image{
		width: 22rpx;
		height: 22rpx;
		margin: 28rpx 28rpx 0 0;
		float: right;
	}
	.alert_top_title{
		width: 600rpx;
		height: 50rpx;
		line-height: 50rpx;
		float: left;
		text-align: center;
		font-size: 36rpx;
		color: #191B1E;
		font-weight: 700;
	}
	.alert_center{
		width: 510rpx;
		height: auto;
		margin: 38rpx 0 0 46rpx;
		float: left;
	}
	.alert_center_shopname{
		width: 510rpx;
		height: 80rpx;
		border-radius: 46rpx;
		float: left;
		background-color: #F0F0F0;
		border-radius: 46rpx;
	}
	.alert_center_shopname:last-child{
		margin-top: 24rpx;
	}
	.alert_center_shopname .alert_center_shopname_title{
		width: 112rpx;
		height: 80rpx;
		float: left;
		display: block;
		color: #191B1E;
		font-size: 28rpx;
		font-weight: 700;
		line-height: 80rpx;
		margin-left: 30rpx;
	}
	.alert_center_shopname .alert_center_shopname_input{
		width: 328rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #999999;
		font-size: 28rpx;
		text-align: right;
		float: left;
		margin-right: 30rpx;
		margin-left: 10rpx;
	}
	.alert_center_category{
		width: 510rpx;
		float: left;
		margin-top: 24rpx;
	}
	.alert_center_category_title{
		width: 100%;
		margin-left: 22rpx;
		color: #191B1E;
		font-size: 28rpx;
		font-weight: 700;
		float: left;
	}
	.alert_center_category_category_content{
		width: 528rpx;
		margin-top: 24rpx;
		float: left;
	}
	.alert_center_category_category_name{
		border: 2rpx solid #D6D6D6;
		background-color: #FFFFFF;
		border-radius: 26rpx;
		font-size: 28rpx;
		width: 112rpx;
		height: 52rpx;
		line-height: 52rpx;
		text-align: center;
		color: #999999;
		margin: 0 17rpx 20rpx 0;
		display: block;
		float: left;
	}
	.alert_center_img{
		float: left;
		margin-top: 24rpx;
	}
	.alert_center_img .alert_center_img_title{
		color: #191B1E;
		font-size: 28rpx;
		font-weight: 700;
		margin-left: 26rpx;
	}
	.alert_center_img  .alert_center_img_upload{
		width: 510rpx;
		float: left;
		position: relative;
	}
	.alert_center_img image{
		width: 132rpx;
		height: 132rpx;
		float: left;
		margin: 20rpx 0 0 26rpx;
	}
	.alert_center_img .alert_center_img_upload_title{
		position: absolute;
		top: 94rpx;
		left: 60rpx;
		color: #999999;
		font-size: 20rpx;
	}
	.alert_btn{
		width: 510rpx;
		height: 92rpx;
		background-image:linear-gradient(#6B96FE,#4D84FE);
		color: #F9F9F9;
		font-size: 28rpx;
		line-height: 92rpx;
		text-align: center;
		margin: 36rpx 0 36rpx 46rpx;
		float: left;
		border-radius: 46rpx;
	}
</style>
